<template>
  <div>
    <div class="myimage">
      我的头像
    </div>
    <el-divider></el-divider>
    <div class="img-center">
      <div class="div-upload">
        <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false"
          :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
          <img v-if="imageUrl" :src="imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>


      </div>
      <div class="cat-color">&nbsp;</div>
      <div class="div-upload">
		  <el-avatar class="old-img" :size="100" :src="user.avatar"></el-avatar>
        <!-- <img class="old-img" src="../assets/logo.png" width="100px" height="100px" /> -->
        <p style="margin-top: 10px; color: gray;">当前头像</p>
      </div>
      <p class="tip-color">请选择图片上传:大小180 * 180像素支持JPG、PNG等格式,图片需小于2M</p>
      <el-button class="update-img" type="info">更新</el-button>
    </div>

  </div>
</template>

<script>
  export default {
    name: 'mineimg',
    data() {
      return {
        imageUrl: '',
		user:{
			avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png'
		}
      };
    },
    methods: {
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg';
        const isLt2M = file.size / 1024 / 1024 < 2;

        if (!isJPG) {
          this.$message.error('上传头像图片只能是 JPG 格式!');
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
        }
        return isJPG && isLt2M;
      }
    },
	created() {
	  if(this.$store.getters.getUser.username) {
	    this.user.avatar = this.$store.getters.getUser.avatar
	  }
	},
  }
</script>

<style>
  .myimage {
    padding-left: 5px;
    border-left: #409EFF 3px solid;
  }

  .img-center {
    width: 400px;
    height: 400px;
    margin: auto;

    /* margin-left: 250px; */
  }

  .cat-color {
    display: block;
    float: left;
    height: 178px;
    border-left: #B3C0D1 1px solid;
    margin-left: 20px;
    margin-right: 10px;
  }

  .div-upload {
    text-align: center;
    display: block;
    float: left;
    width: 179px;
    height: 179px;
    margin-bottom: 20px;
  }

  .old-img {
    margin-top: 40px;
	border: wheat 2px  solid;
    border-radius: 50%;
  }

  .tip-color {
    color: gray;
    font-size: 10px;
  }

  .update-img {
    width: 120px;
    margin-left: 150px;
    margin-top: 20px;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>
